<template>
	<div class="early-warning es-each-line">
		<div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
	     	<div class="widget am-cf">
	        	<div class="widget-body am-fr">
					<div class="am-u-md-12 one-line">
						<el-select size="small" @change="handleChangeArea" class="am-u-sm-12 am-u-md-12 am-u-lg-3" v-model="query.areaTeamId" placeholder="请选择区域">
	                        <el-option
	                            v-for="item in areaTeams"
	                            :key="item.areaTeamId"
	                            :label="item.name"
	                            :value="item.areaTeamId">
	                        </el-option>
	                    </el-select>
	                    <el-select size="small" class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-form-group" clearable
					               :disabled="busTeams.length === 0" v-model="query.busTeamId" placeholder="请选择业务组">
					    	<el-option
						        v-for="item in busTeams"
						        :key="item.busTeamId"
						        :label="item.name"
						        :value="item.busTeamId">
					    	</el-option>
					    </el-select>
					    <el-date-picker class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-form-group"
                            v-model="year"
                            type="year"
                            :clearable="false"
                            :editable="false"
                            placeholder="请选择年份">
                        </el-date-picker>
						<el-select :disabled="periods.length === 0" size="small" class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-form-group" clearable
	                        v-model="query.periodId" placeholder="请选择期数">
	                        <el-option
	                            v-for="item in periods"
	                            :key="item.periodId"
	                            :label="item.periodName"
	                            :value="item.periodId">
	                        </el-option>
	                    </el-select>
                    </div>
                    <div class="am-u-md-12 one-line">
                    	<el-select class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-form-group"
		                           v-model="query.gradeId" clearable placeholder="请选择年级">
		                	<el-option label="请选择年级" value="">
		               		</el-option>
		                	<el-option
			                    v-for="item in grades"
			                    :key="item.gradeId"
			                    :label="item.gradeName"
			                    :value="item.gradeId">
		                	</el-option>
		                </el-select>
		                <el-select size="small" class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-form-group"
			                       v-model="query.subjectIds" multiple placeholder="请选择科目">
			            	<el-option
				                v-for="item in subjects"
				                :key="item.value"
				                :label="item.label"
				                :value="item.value">
			            	</el-option>
			            </el-select>
                    	<div class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-form-group am-u-end">
					    	<button @click="search" type="button" class="btn-search am-btn am-btn-default am-btn-success">
					        	<span class="am-icon-search"></span>查询
					    	</button>
					    	<button @click="handleExport" type="button" class="btn-search am-btn am-btn-default am-btn-success">
						        <span class="am-icon-search"></span>导出
						    </button>
					    </div>
			        </div>

				    <div class="am-u-sm-12">
			            <el-table
			              :data="tableData"
			              border
			              stripe
			              :empty-text="tableNoDataTips"
			              style="min-width: 100%">
			              <el-table-column
			                prop="periodName"
			                label="期数"
			                fixed
			                min-width="100">
			              </el-table-column>
			              <el-table-column
			                label="业务组"
			                fixed
			                prop="busTeamName"
			                min-width="100">
			              </el-table-column>
			              <el-table-column
			                align="center"
			                label="年级"
			                prop="gradeName"
			                width="150">
			              </el-table-column>
			              <el-table-column
			                label="科目"
			                prop="subjectName"
			                min-width="100">
			              </el-table-column>
			              <el-table-column
			                align="center"
			                label="姓名"
			                prop="studentName"
			                min-width="100">
			              </el-table-column>
			              <el-table-column
			                align="center"
			                label="学号"
			                prop="studentNo"
			                min-width="100">
			              </el-table-column>
			              <el-table-column
			                align="center"
			                label="电话"
			                prop="studentPhoneNo"
			                min-width="100">
			              </el-table-column>
			              <el-table-column
			                align="center"
			                label="生源类型"
			                min-width="100">
			                <template scope="scope">
					            {{ {'0': '新生', '1': '老生', '2': '续读生'}[scope.row.studentState] }}
					        </template>
			              </el-table-column>
			              <el-table-column
			                align="center"
			                label="报读班级"
			                prop="className"
			                min-width="100">
			              </el-table-column>
			              <el-table-column
			                align="center"
			                label="报名校区"
			                prop="campusName"
			                min-width="100">
			              </el-table-column>
			              <el-table-column
			                align="center"
			                label="应缴金额"
			                prop="totalAmount"
			                min-width="100">
			              </el-table-column>
			              <el-table-column
			                align="center"
			                label="实缴金额"
			                prop="realAmount"
			                min-width="100">
			              </el-table-column>
			              <el-table-column
			                align="center"
			                label="实退金额"
			                prop="refundAmount"
			                min-width="100">
			              </el-table-column>
			              <el-table-column
			                align="center"
			                label="退费方式"
			                min-width="100">
			                <template scope="scope">
					            {{ {'0': '支付宝', '1': '微信', '2': '现金', '3': '虚拟余额账户', '4': '银行卡转账'}[scope.row.refundWay] }}
					        </template>
			              </el-table-column>
			              <el-table-column
			                align="center"
			                label="退费申请人"
			                prop="applyOperator"
			                min-width="100">
			              </el-table-column>
			              <el-table-column
			                align="center"
			                label="申请退费时间"
			                min-width="100">
			                <template scope="scope">
			                	{{ scope.row.applyTime | formatTime }}
			                </template>
			              </el-table-column>
			              <el-table-column
			                align="center"
			                label="在读讲数"
			                prop="readingLectureNum"
			                min-width="100">
			              </el-table-column>
			              <el-table-column
			                align="center"
			                label="退费讲数"
			                prop="refundLectureNum"
			                min-width="100">
			              </el-table-column>
			              <el-table-column
			                align="center"
			                label="退费讲次"
			                prop="refundLectureNos"
			                min-width="100">
			              </el-table-column>
			              <el-table-column
			                align="center"
			                label="退费原因"
			                prop="refundReason"
			                min-width="100">
			              </el-table-column>
			            </el-table>
			        </div>

			        <div class="am-u-lg-12 am-cf">
			            <div class="am-fr">
			            	<pagination v-bind:total="total" v-bind:pageNo="query.pageNo" v-bind:pageSize="query.pageSize" @paging="handleSearch" />
			            </div>
			        </div>
	        	</div>
	        </div>
	    </div>
	</div>
</template>
<script>
	import io from '../../lib/io'
	import moment from 'moment'
	import Pagination from '../base/Pagination'
	export default{
		data(){
			return {
				tableNoDataTips: '暂无数据',
				tableData: [],
				segmentNos: [],
				year: moment().format('YYYY'),
				query:{
					areaTeamId : window.config.areaTeams[0] && window.config.areaTeams[0].areaTeamId || '' ,
					busTeamId: '',
					periodId: '',
					gradeId: '',
					subjectIds: [],
					pageNo: 1,
					pageSize: 10,
				},
				total: 0,
				periods: [],
			}
		},
		components: {
	    	Pagination
	    },
		methods:{
			handleChangeArea(){
				this.loadPeriodData()
			},
			loadPeriodData(resolve) {
		        io.post(io.periodByYearAndAreaTeamId, {
		          areaTeamId : this.query.areaTeamId,
		          year: this.year ? moment(this.year).format('YYYY'): '',
		        }, (ret) => {
					if (ret.success) {
						this.periods = ret.data;
						if(this.periods.length === 0){
							this.$alert('当前没有设置期数')
							this.query.periodId = ''
						}else{
							let curPeriodId = ret.data.filter(item => item.isCurrent == 1 )[0] ? ret.data.filter(item => item.isCurrent == 1 )[0].periodId : '';
							if(curPeriodId != ''){
								this.query.periodId = curPeriodId
							}else{
								this.query.periodId = this.periods[0].periodId
							}
						}
					} else {
						this.$alert(ret.desc)
					}

					if(resolve){
                        resolve('success');
                    }
		        })
	      	},
	      	search(){
	      		this.query.pageNo = 1;
	      		this.handleSearch();
	      	},
	      	handleSearch(pageNo){
	      		let formData = this.getFormDate(pageNo);
	      		io.post(io.findRefundDetail, formData , (ret) => {
		        	if(ret.success){
		        		this.tableData = ret.data.list;
		        		this.total = ret.data.total;
		        	}
		        })
	      	},
	      	getFormDate(pageNo){
	      		this.query.pageNo = pageNo || this.query.pageNo || 1
	      		let formData = {};
	      		for(var key in this.query){
	      			if(Array.isArray(this.query[key])){
	      				formData[key] = this.query[key].join(",");
	      			}else if(typeof this.query[key] === "boolean"){
	      				if(this.query[key]){
	      					formData[key] = 1
	      				}
	      			}else {
	      				if((this.query[key] + '').trim() !== ''){
		      				formData[key] = this.query[key];
		      			}
	      			}
	      		}
	      		return formData;
	      	},
	      	handleExport(){
	      		let formData = this.getFormDate();
	      		io.downloadFile(io.exportRefundDetail, formData);
	      	},
		},
		watch: {
	    	year (newVal, oldVal) {
	        	this.loadPeriodData()
	    	}
	    },
		computed: {
			areaTeams() {
                return this.$root.config.areaTeams || []
            },
            busTeams() {
            	let busTeams = ( ( this.query.areaTeamId  ) ? ( this.$root.config.groupBusTeams[this.query.areaTeamId] || [] ) : [] )
            	if(busTeams.length){
            		// this.query.busTeamId = busTeams[0].busTeamId
            	}
		        return busTeams
		    },
		    grades: function () {
		        return this.$root.config.grades || []
		    },
		    subjects () {
		        return [{value: '', label: '全部科目'}].concat(
		        	this.$root.config.subjects.map(function(item){
		            	return {value: item.subjectId, label: item.subjectName}
		        	})
		        )
		    }
		},
		created(){
				$(window).smoothScroll()
	    	let promise = new Promise((resolve, reject) => {
                this.loadPeriodData(resolve)
            });
	    	promise.then((value) => {
				// success
				this.handleSearch();
			}, (error) => {
				// failure
			});

	    },
	}
</script>
<style lang="less">

</style>
